<template>
	<view class="chart_content_item">
		<LEchart ref="chartRef"></LEchart>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		defineProps,
		watch
	} from 'vue'
	import LEchart from "@/components/l-echart/l-echart.vue"
	const echarts = require('../../static/echarts.min.js')


	const chartRef = ref()

	const props = defineProps({

		option: {
			type: Object
		}
	})
	onMounted(() => {



		setTimeout(() => {
			if (!chartRef.value) return
			chartRef.value.init(echarts, chart => {
				chart.setOption(props.option)
			})
		}, 300)
	})

	watch(() => props.option, (newVal, oldVal) => {
		// console.log(newVal, oldVal,'oldVal')
		if (chartRef.value) {
			chartRef.value.init(echarts, chart => {
				chart.setOption(newVal)
			})
		}
	}, {
		deep: true,
		immediate: true
	})
</script>

<style>
	.chart_content_item {
		width: 100%;
		height: 100%;
	}
</style>